<template>
  <div class="flow-chart">
    <div id="myFlow"></div>
    <!-- <div class="main-container" v-if="types > 0">
      <div v-for="val of types" :key="val" class="lane">
        
      </div>
    </div> -->
  </div>
</template>

<script>

import { init } from "./test";
export default {
  // props: {
  //   types: {
  //     type: Number,
  //     default: 0,
  //   },
  //   data: {
  //     type: Array,
  //     default: undefined,
  //     required:true
  //   }
  // },
  data() {
    return {
      types:['type1','type2','type3'],
      deploy: {
        nodes: [
          {
            id: "CC_A",
            dataType: "type1",
            label: "第一个节点",
            // size: [120, 40],
            status: 3,
            info: {
              user: "大晨晨",
              time: "2021-01-29"
            }
          },
          {
            id: "CC_B",
            dataType: "type1",
            label: "第二个节点",
            // size: [120, 40],
            status: 3,
            info: {
              user: "大晨晨",
              time: "2021-01-29"
            }
          },
          {
            id: "CC_C",
            dataType: "type2",
            // size: [120, 40],
            label: "第三个节点\nCC_C",
            status: 3
          },
          {
            id: "CC_D",
            dataType: "type3",
            // size: [120, 40],
            label: "第四个节点\nCC_D",
            status: 3
          },
          {
            id: "CC_E",
            dataType: "type2",
            // size: [120, 40],
            label: "第五个节点",
            status: 3
          },
          {
            id: "end",
            dataType: "type3",
            // size: [120, 40],
            label: "结束",
            status: 3
          }
        ],
        edges: [
          {
            source: "CC_A",
            target: "CC_B"
          },
          {
            source: "CC_B",
            target: "CC_C",
            // controlPoints: [{ x: 100, y: 120 }]
          },
          {
            source: "CC_B",
            target: "CC_D",
            // controlPoints: [{ x: 515, y: 120 }]
          },
          {
            source: "CC_D",
            target: "CC_E",
          },
          {
            source: "CC_A",
            target: "end"
          }
        ]
      }
    }
  },
  mounted() {
    init(1250, 960, "myFlow", this.deploy,this.types, this);
  },
  watch: {
    
  },
  methods: {
    
  },
  computed: {
    
  }
}
</script>

<style scoped>
.main-container{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
</style>